<template>
  <PageWrapper
    title="VxeTable表格"
    content="只展示部分操作，详细功能请查看VxeTable官网事例"
    contentFullHeight
    fixedHeight
  >
    {{ mSelectedRowKeys }}
    <VxeBasicTable ref="tableRef" v-bind="gridOptions" @radio-change="handleRadioChange">
      <template #tableTitle>
        <TableAction
          :actions="[
            {
              label: '新增',
              icon: 'ant-design:plus-outlined',
              type: 'primary',
              size: 'middle',
              auth: ['admin', 'sys:user:save'],
            },
          ]"
          :dropDownActions="[
            {
              label: '批量删除',
            },
          ]"
        >
          <template #more>
            <a-button style="margin-left: 8px">更多操作</a-button>
          </template>
        </TableAction>
      </template>
      <template #ACTION="{ row }">
        <TableAction
          :actions="[
            {
              label: '编辑',
              auth: ['admin', 'sys:user:update'],
              onClick: handleEdit.bind(null, row),
            },
            {
              label: '删除',
              popConfirm: {
                title: '您确定删除该条记录吗？',
                confirm: handleDelete.bind(null, row),
              },
              auth: ['admin', 'sys:user:remove'],
            },
          ]"
          :dropDownActions="[
            {
              label: '编辑1',
            },
            {
              label: '删除2',
            },
          ]"
        />
      </template>
      <template #toolbarRight>toolbar</template>
    </VxeBasicTable>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { TableAction } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { vxeTableColumns, vxeTableFormSchema } from './tableData';
  import { BasicTableProps, VxeBasicTable, VxeGridInstance } from '@/components/VxeTable';
  import { sysUserPage } from '@/api/sys/user';

  const mSelectedRowKeys = ref<Array<any>>([]);

  const tableRef = ref<VxeGridInstance>();

  const gridOptions = reactive<BasicTableProps>({
    id: 'VxeTable',
    keepSource: true,
    editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
    columns: vxeTableColumns,
    radioConfig: {
      checkRowKey: 'isChecked',
      checkMethod: ({ row }) => {
        return row.sex != 3;
      },
    },
    toolbarConfig: {
      // buttons: [
      //   {
      //     buttonRender: {
      //       name: 'TableAction',
      //       props: {
      //         actions: [
      //           {
      //             label: '新增',
      //             icon: 'ant-design:plus-outlined',
      //             type: 'primary',
      //             size: 'middle',
      //             auth: ['admin', 'sys:user:save'],
      //           },
      //         ],
      //         dropDownActions: [
      //           {
      //             label: '批量删除',
      //           },
      //         ],
      //       },
      //     },
      //   },
      // ],
      slots: {
        buttons: 'tableTitle',
        tools: 'toolbarRight',
      },

      refresh: true, // 刷新
      print: false, // 打印
      export: false, // 导出
      // custom: true, // 自定义列
      zoom: true, // 最大化最小化
      custom: {
        // 自定义列-图标
        icon: 'vxe-icon-menu',
      },
    },
    formConfig: {
      enabled: true,
      items: vxeTableFormSchema,
    },
    height: 'auto',
    proxyConfig: {
      ajax: {
        query: async ({ page, form }) => {
          return sysUserPage({
            pageNum: page.currentPage,
            pageSize: page.pageSize,
            ...form,
          });
        },
        queryAll: async ({ form }) => {
          return await sysUserPage(form);
        },
      },
    },
  });

  /**
   * 编辑事件
   * @param record
   */
  const handleEdit = (record) => {
    console.log(record);
    console.log(tableRef.value?.getRadioRecord());
  };
  const handleDelete = (record) => {
    console.log(record);
  };
  const handleRadioChange = ({ row }) => {
    mSelectedRowKeys.value = [row.id];
  };
</script>
